/**
 * 虚拟DOM转DOM
 */
const vnode = h("div", { class: "adny" }, [
  h("h1", { class: "ad", style: "color:#fab" }, "Adny"),
  h("h2", { class: "er", style: "color:#abf" }, "Erkelost"),
]);

function h(tag, props, children) {
  return {
    tag, // ‘div’
    props, // style， class， onclick...
    children, // [{},{}], or 'this is text Node'
  };
}

function mount(vnode, container) {
  // 先创建一个真实的DOM
  const el = (vnode.el = document.createElement(vnode.tag));

  // 处理props
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key];

      // 方法
      if (key.startsWith("on")) {
        //  onlick   onclick.slice(2).toLocalLowerCase()
        // onclick = function () { console.log('any thing is ok!')}
        el.addEventListener(key.slice(2).toLocaleLowerCase(), value);
      } else {
        // 属性
        el.setAttribute(key, value);
      }
    }
  }

  // 处理children
  if (vnode.children) {
    // 如果，孩子只是一个字符串，那么就是单文本内容
    if (typeof vnode.children === "string") {
      el.textContext = vnode.children;
    } else {
      // 如果chidren是一个数组，那么就是有多个孩子
      vnode.children.forEach((item) => {
        //   然后，挂在el上
        mount(item, el);
      });
    }
  }

  /**
   * @descrption 也可以使用这个判断来实现
  if (Array.isArray(vnode.children)) {
    vnode.children.forEach((child) => {
      mount(child, el);
    });
  } else {
    el.textContext = vnode.children;
  }
  */
  // 将dom挂载到容器DOM上
  container.appendChild(el);
}
